<!--
 供应端  协议管理-战略详情-查看
 采购端  协议管理-协议详情-查看
 运营端  战略协议-协议列表-查看
 公共产品预览页面
 -->
<script setup lang='ts'>
import { cloneDeep } from 'lodash-es'
import { computed, ref, watchEffect } from 'vue'

import AddCar from './component/add-car.vue'
import Breadcrumb from './component/breadcrumb.vue'
import Tabs from './component/tabs.vue'

const catPath = ref<any>([])

const res = computed(() => {
    const str = window.sessionStorage.getItem('PRODUCT_DETAIL')
    return str ? JSON.parse(str) : {}
})

const formData = computed(() => ({ ...res.value }))

// 类目记录
const categoryList = computed(() => {
    return formData.value?.categoryList ?? []
})

const isNoData = computed(() => {
    return JSON.stringify(formData.value) === '{}' || !formData.value
})

function getItem(params: any) {
    const item = cloneDeep(params)
    Reflect.deleteProperty(item, 'children')
    return item
}

function treeToArr(tree) {
    const flatData: any = []

    function flatten(node: any) {
        const item = getItem(node)
        flatData.push(item)

        if (node.children) {
            flatten(node.children[0])
        }
    }

    flatten(tree[0])

    return flatData
}

watchEffect(() => {
    if (categoryList.value && categoryList.value.length) {
        catPath.value = treeToArr(categoryList.value)
    }
})
</script>

<template>
    <div class="mx-auto mb-40 w-1300">
        <template v-if="!isNoData">
            <Breadcrumb :data="catPath" />

            <AddCar :data="formData"
                    class="mt-60"
            />

            <Tabs :data="formData" />
        </template>

        <el-empty v-else
                  :image-size="200"
        />
    </div>
</template>

<style lang="less" scoped>

</style>
